<template>
  <div class="app-container pagemanage fuser_manage">
    <div class="pageheader fusmanage_header">
      <!-- <el-form
        v-show="showSearch"
        ref="queryForm"
        :model="queryParams"
        :inline="true"

      >
        <el-form-item :label="$t('common.csearchWord')" prop="keyword">
          <el-input
            v-model="queryParams.keyword"
            :placeholder="$t('common.ckeyword')"
            style="width: 240px"
          />
        </el-form-item>

        <el-form-item :label="$t('celler.interTime')">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="-"
            :start-placeholder="$t('common.cstartTime')"
            :end-placeholder="$t('common.cendTime')"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >{{ $t("common.csearch") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
            $t("common.creset")
          }}</el-button>
        </el-form-item>
      </el-form> -->

      <el-row
        :gutter="10"
        class="mb8"
        style="display: flex; align-items: center"
      >
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['systems:fuser:add']"
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addFuser()"
            >{{ $t("common.caddkey") }}</el-button
          >
        </el-col>
        <!-- <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="leadingOutData"
          >{{ $t("operating.export") }}</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
          >{{ $t("operating.import") }}</el-button>
        </el-col> -->
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['systems:fuser:delete']"
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="delFuser()"
            >{{ $t("common.cdelete") }}</el-button
          >
        </el-col>

        <!-- <right-toolbar :show-search.sync="showSearch" @queryTable="initFuser" /> -->
      </el-row>
    </div>

    <div class="pagecontent fumanage_content">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="fuserData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('fuser.fuserLcid')">
          <template slot-scope="scope">{{ scope.row.fuserLcid }}</template>
        </el-table-column>
        <el-table-column prop="fuserName" :label="$t('fuser.fuserName')" />
        <el-table-column
          prop="fuserIp"
          :label="$t('fuser.fuserIp')"
          show-overflow-tooltip
        />
        <el-table-column :label="$t('fuser.state')">
          <template slot-scope="scope">
            <span
              :style="
                scope.row.state == 1
                  ? 'color:#887d80'
                  : scope.row.state == 0
                  ? 'color:#0cc53c'
                  : 'color:#43DAE6'
              "
            >
              ({{
                scope.row.state == 1
                  ? $t("common.coffline")
                  : scope.row.state == 0
                  ? $t("common.conline")
                  : $t("common.cnone")
              }})
            </span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('operating.operating')">
          <template slot-scope="scope">
            <el-button
              v-hasPermi="['systems:fuser:edit']"
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >{{ $t("operating.handle") }}</el-button
            >
            <el-button
              v-hasPermi="['systems:fuser:delete']"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
              >{{ $t("operating.delete") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="initFuser"
      />
    </div>

    <!--编辑弹出框-->
    <el-dialog
      :title="titleMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      @closed="close"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item :label="$t('fuser.fuserLcid')" prop="fuserLcid">
          <el-input
            v-model="form.fuserLcid"
            :placeholder="$t('operating.pleaseWrite')"
          />
        </el-form-item>
        <el-form-item :label="$t('fuser.fuserName')" prop="fuserName">
          <el-input
            v-model="form.fuserName"
            :placeholder="$t('operating.pleaseWrite')"
          />
        </el-form-item>
        <el-form-item :label="$t('fuser.fuserIp')" prop="fuserIp">
          <el-input
            v-model="form.fuserIp"
            :placeholder="$t('operating.pleaseWrite')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addEditFuser('form')">{{
          $t("operating.determine")
        }}</el-button>
        <el-button @click="closeDialog">{{ $t("operating.cancel") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fuserList, deleteFuser, saveAndeEditFuser } from "@/api/cy.js";
export default {
  data() {
    return {
      total: 0, // 总页数
      dateRange: [], // 来访日期范围
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: undefined,
      },
      multiple: true,
      loading: true,
      editExportVisible: false, // 导入弹窗
      showSearch: true, // 是否显示条件查询
      dialogFormVisible: false,
      fuserData: [],
      multipleSelection: [],
      form: {
        fuserLcid: "",
        fuserName: "",
        fuserIp: "",
      },
      titleMap: {
        addEquipment: this.$i18n.t("common.cadd"),
        editEquipment: this.$i18n.t("common.cupdate"),
        outputEquipment: "数据输出设置",
      },
      // 新增和编辑弹框标题
      dialogStatus: "",
      formLabelWidth: "100px",
      rules: {
        fuserLcid: [
          {
            required: true,
            // message: this.$i18n.t('fuser.checkSystemId'),
            message:
              this.$i18n.t("operating.pleaseWrite") +
              this.$i18n.t("fuser.fuserLcid"),
            trigger: "blur",
          },
        ],
        fuserName: [
          {
            required: true,
            // message: this.$i18n.t('fuser.checkSystemName'),
            message:
              this.$i18n.t("operating.pleaseWrite") +
              this.$i18n.t("fuser.fuserName"),
            trigger: "blur",
          },
        ],
        fuserIp: [
          {
            required: true,
            message: this.$i18n.t("fuser.checkSysteIp"),
            trigger: "blur",
          },
          {
            pattern:
              /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/,
            message: this.$i18n.t("fuser.chekcSystemIpRule"),
          },
        ],
      }, // 用户表单验证
      editEnable: false, // 是否编辑
    };
  },
  mounted() {
    this.initFuser();
  },
  methods: {
    close() {
      this.resetForm("form");
    },
    closeDialog() {
      this.dialogFormVisible = false;
      this.resetForm("form");
    },
    initFuser() {
      fuserList(this.choseDateRange(this.queryParams, this.dateRange))
        .then((res) => {
          if (res.code === 200) {
            this.loading = false;
            this.total = res.total;
            this.fuserData = res.rows;
          }
        })
        .catch((e) => {
          this.loading = false;
        });
    },

    /**
     * 添加编辑
     */
    addEditFuser(formName) {
      // 编辑
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let param;
          if (this.editEnable) {
            // 编辑
            param = {
              fuserLcid: this.form.fuserLcid,
              fuserName: this.form.fuserName,
              fuserIp: this.form.fuserIp,
              idx: this.fuserId,
            };
          } else {
            // 添加
            param = {
              fuserLcid: this.form.fuserLcid,
              fuserName: this.form.fuserName,
              fuserIp: this.form.fuserIp,
            };
          }

          saveAndeEditFuser(param).then((res) => {
            const RES = this.responseUse(res, true);
            if (RES) {
              this.resetForm("form");

              this.editEnable = false;
              this.dialogFormVisible = false;
              this.initFuser();
            }
          });
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleEdit(index, row) {
      console.log(index, row, this.fuserData[index]);
      this.form = {
        fuserLcid: row.fuserLcid,
        fuserName: row.fuserName,
        fuserIp: row.fuserIp,
      };
      this.fuserId = row.idx;

      this.dialogFormVisible = true;
      this.editEnable = true;
      this.dialogStatus = "editEquipment";
    },
    addFuser() {
      this.form = { fuserLcid: "", fuserName: "", fuserIp: "" };
      if (this.$refs["form"] !== undefined) {
        this.$refs["form"].resetFields();
      }
      this.dialogFormVisible = true;
      this.dialogStatus = "addEquipment";
      this.editEnable = false;
    },

    // 选中
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val.map((item) => {
        return {
          idx: item.idx,
        };
      });
      this.multiple = !this.multipleSelection.length;
    },
    // 删除单项
    handleDelete(index, row) {
      this.deleteData(this.$i18n.t("common.cdelTipItem") + row.fuserName, [
        { idx: row.idx },
      ]);
    },
    // 批量删除
    delFuser() {
      this.deleteData(this.$i18n.t("common.cdelTip"), this.multipleSelection);
    },

    deleteData(delTip, delData) {
      this.$confirm(delTip, this.$i18n.t("common.cwarn"), {
        confirmButtonText: this.$i18n.t("common.cok"),
        cancelButtonText: this.$i18n.t("common.ccancel"),
        type: "warning",
      })
        .then(function () {
          return deleteFuser(delData);
        })
        .then((response) => {
          this.msgSuccess(response.msg);
          setTimeout(() => {
            this.initFuser();
          }, 1500);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.pageheader {
  margin-bottom: 12px;
}
</style>
<style scoped>
/deep/ .el-form-item {
  margin-bottom: 10px;
}

/deep/ .el-dialog__body {
  padding: 8px 24px;
}
</style>
